<template>
	<view>
		<uni-nav-bar
			shadow
			fixed
			color="#fff"
			statusBar
			background-color="#0081ff" 
			title="我的申请"
		/>
		<!-- offset-top="38" -->
		<u-sticky bgColor="#fff" >
			<view style="padding: 10px;background-color: #f1f1f1;">
				<u-search placeholder="流程名称" bgColor="#fff" :showAction="false" @clickIcon="search" @search="search" @clear="search" v-model="processDefinitionName"></u-search>
				<u-tabs
					:list="items" 
					:current="current" 
					:scrollable="true" 
					@click="onClickTab"
					lineWidth="30"
					:activeStyle="{
						 color: '#303133',
						 fontWeight: 'bold',
						 transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						 color: '#606266',
						 transform: 'scale(1)'
					}"
				>
				</u-tabs>
			</view>
		</u-sticky>
		<view class="content">
			<myApplyTask :filtersPorps="filters" :processDefinitionName="processDefinitionName" @click="handlePending" ref="myApplyTask" />
		</view>
	</view>
</template>

<script>
	import myApplyTask from './modules/myApplyTask'
	
	export default {
		mixins:[],
		components:{ myApplyTask },
		data() {
			return {
				current:0,
				items: [
					{name:'审批中'},
					{name:'已完成'},
					{name:'已暂停'},
					// {name:'已终止'}
				],
				filters:{
					'state@EQ': 'ACTIVE'
				},
				processDefinitionName:''
			}
		},
		computed: {
		  windowHeight() {
		    return uni.getSystemInfoSync().windowHeight - 50
		  }
		},
		methods: {
			onClickTab(e){
				this.current = e.index
				this.search()
			},
			search(){
				this.getFilters()
				setTimeout(() => {
					this.$refs.myApplyTask && this.$refs.myApplyTask.onSearch()
				},100)
			},
			getFilters(){
				if(this.current === 0){
					this.filters = {
						'state@EQ': 'ACTIVE'
					}
				}else if(this.current === 1){
					this.filters = { 
						'state@EQ': 'COMPLETED'
					}
				}else if(this.current === 2){
					this.filters = { 
						'state@EQ': 'SUSPENDED'
					}
				}else if(this.current === 3){
					this.filters = { 
						'state@EQ': 'INTERNALLY_TERMINATED'
					}
				}
			},
			handlePending(row){
				this.$Router.push({
					path:'/pages/flow/taskForm',
					query:{
						id:row.id,
						processInstanceId:row.id,
						type:'apply',
						disabled:row.state !=='ACTIVE'
					}
				})
			}
		},
		onShow(){
			// this.search()
		},
		mounted(){
			this.search()
		},
		onReachBottom() {
			this.$refs.myApplyTask && this.$refs.myApplyTask.loadMore()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}
</style>
